<template>
    <a-card :title="`${menuTagName}菜单预览`" :bordered="false">
        <!-- Card Header -->
        <template slot="extra">
            <a-button type="primary" icon="sync" @click="onSubmit">保存并发布菜单</a-button>
        </template>


        <div class="menuBox">
            <div class="menuHeader">
                <p>微信公众平台</p>
            </div>
            <div class="menuCenter"></div>
            <div class="menuFooter">
                <a class="keyboard" @mouseenter="showSubMenu=null"></a>
                <a-row class="buttonGroup">
                    <!--  主菜单循环列表  -->
                    <a-col v-for="(item,index) in  menuButtonArray(defaultPid) " :key="index" :span="colSpan"
                           class="menuBtnBox">

                        <a class="mbtn"
                           @click="editMenu(item.id)"
                           @mouseenter="showSubMenu=item.id">
                            {{item.name}}
                        </a>
                        <div class="sbtn" v-show="showSubMenu===item.id">
                            <a v-for=" (mx,k) in menuButtonArray(item.id) " :key="k"
                               @click="editMenu(mx.id)"
                               class="btn">{{mx.name}}</a>
                            <a class="btn" v-show="menuButtonArray(item.id).length<5  " @click="createBtn(item.id)">
                                <a-icon type="plus"/>
                            </a>
                        </div>
                    </a-col>


                    <!--  主菜单添加控制器  -->
                    <a-col v-if="showMainAdd" :span="colSpan" class="menuBtnBox" @click="createBtn(defaultPid)">

                        <a class="mbtn">
                            <a-icon type="plus"/>
                        </a>

                    </a-col>
                </a-row>


            </div>

        </div>
    </a-card>

</template>

<script>
    import {tagDelete} from "../../public/http";

    export default {
        props: ['menuList', 'menuTagId', 'menuTagName'],
        data() {
            return {
                defaultPid: 'NA',
                showSubMenu: null,


            }
        },

        methods: {
            //创建一个菜单 pid 顶级菜单的ID
            createBtn(pid) {
                //获取一个毫秒级时间戳 来作为ID
                let menuId = this.$exMod.randString(20);
                let obj = {tagId: this.menuTagId, id: menuId, name: "菜单名称", pid: pid, type: null, content: null}
                this.dataSource.push(obj)
                this.editMenu(menuId);
            },

            //根据主菜单ID获取对应的字菜单数据
            menuButtonArray(pid) {
                return this.dataSource.filter(item => item.pid === pid);

            },
            //告诉父组件正在编辑的菜单
            editMenu(id) {
                this.$emit("onEdit", {id: id});
            },

            //提交
            onSubmit() {
                let _this = this;
                this.$confirm({
                    title: '确定要保存并发布 【' + _this.menuTagName + '】的个性化菜单吗？',
                    onOk() {
                        _this.$emit("submit", true);
                    },

                });


            }

        },

        computed: {
            dataSource() {
                return this.menuList;
            },

            //主菜单是否可见控制
            showMainAdd() {
                //如果顶级菜单的数量小于3个 那么可以选择主菜单添加按钮
                //否则不显示
                return this.menuButtonArray(this.defaultPid).length < 3;

            },

            colSpan() {
                //根据主菜单的个数来控制菜单宽度
                let size = this.menuButtonArray(this.defaultPid).length;
                let number = size < 3 ? size + 1 : 3;
                return 24 / number;
            }


        }
    }
</script>

<style scoped>

    .menuBox {

        background-color: #F8F8F8;
        width: 320px;
        line-height: 50px;
        margin-left: auto;
        margin-right: auto;
        font-size: 12px;
    }

    .menuBox .menuHeader {
        background-image: url("./menu_header.png");
        background-size: 100% 100%;
        width: 100%;
        height: 64px;
        text-align: center;
        top: 0;
        left: 0;
        position: relative;
        box-sizing: border-box;
        border: 1px solid #333333;


    }

    .menuBox .menuHeader p {
        line-height: 64px;
        margin-top: 10px;
        color: #FFFFFF;
    }


    .menuBox .menuCenter {
        width: 100%;
        height: 420px;
        clear: both;
        border-left: 1px solid #dee5e7;
        border-right: 1px solid #dee5e7;
        box-sizing: border-box;
    }

    .menuBox .menuFooter {
        width: 100%;
        height: 50px;
        clear: both;
        border: 1px solid #dee5e7;
        box-sizing: border-box;

    }

    .keyboard {

        width: 40px;
        height: 50px;

        background: url(./keyboard.png) no-repeat center;
        border-right: 1px solid #dee5e7;
        box-sizing: border-box;
        float: left;

    }

    .buttonGroup {
        line-height: 50px;
        height: 50px;
        width: calc(100% - 40px);
        float: left;
    }

    .buttonGroup .menuBtnBox {
        text-align: center;
        height: 50px;
        line-height: 50px;
        box-sizing: border-box;

    }


    .menuBtnBox .mbtn {
        width: 100%;
        height: 50px;
        line-height: 50px;

        float: left;
        bottom: 0;
        border-right: 1px solid #dee5e7;
        color: #666666;
        position: relative;
    }


    .menuBtnBox .sbtn {
        width: 100%;
        background-color: #ffffff;
        float: left;
        position: absolute;
        bottom: 52px;
    }

    .sbtn .btn {

        color: #666666;
        width: 100%;
        height: 45px;
        line-height: 45px;
        float: left;
        border-left: 1px solid #dee5e7;
        border-right: 1px solid #dee5e7;
        border-top: 1px solid #dee5e7;
        box-sizing: border-box;
        overflow: hidden;


    }


</style>
